<script setup>
    import { ref, watch } from 'vue';
    import {
    Document,
    Menu as IconMenu,
    Setting,
    } from '@element-plus/icons-vue'

    const props = defineProps({
        isCollapse: Boolean
    })
</script>
<template>
    <div class="container">
        <el-menu
            active-text-color="#fff"
            background-color="#252834"
            class="el-menu-vertical-demo"
            text-color="#fff"
            :collapse="isCollapse"
        >
            <el-menu-item class="title">
                <span>运营管理平台</span>
            </el-menu-item>
            <el-menu-item index="1">
                <router-link to="/home/dashboard">
                    <el-icon><icon-menu /></el-icon>{{ !isCollapse ? "首页" : "" }}
                </router-link>
            </el-menu-item>
            <el-menu-item index="2">
                <router-link to="/home/arketingTasks">
                    <el-icon><document /></el-icon>{{ !isCollapse ? "外呼营销" : "" }}
                </router-link>
            </el-menu-item>
            <el-menu-item index="3">
                <router-link to="/home/change">
                    <el-icon><setting /></el-icon>{{ !isCollapse ? "修改资料" : "" }}
                </router-link>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<style lang="scss" scoped>
    .container {
        width: auto;
        height: 100%;
        background-color: #252834;
        .el-menu-vertical-demo {
            border: none;
            .title:hover {
                background-color: #252834;
            }
            li:hover {
                background-color: #409EFF;
            }
        }
    }
</style>